<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台登录-X-admin1.1</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
	<link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>

</head>
<body>
    <div class="login-logo"><h1>X-ADMIN V1.1</h1></div>
    <div class="login-box">
        <form class="layui-form layui-form-pane" action="${pageContext.request.contextPath}/AdminServlet">
             <input type="hidden" name="op" value="login"> 
            <h3>登录你的帐号</h3>
            <label class="login-title" for="username">帐号</label>
            <div class="layui-form-item">
                <label class="layui-form-label login-form"><i class="iconfont">&#xe6b8;</i></label>
                <div class="layui-input-inline login-inline">
                  <input type="text" name="adminId"  placeholder="请输入你的帐号"  class="layui-input">
                </div>
            </div>
            <label class="login-title" for="password">密码</label>
            <div class="layui-form-item">
                <label class="layui-form-label login-form"><i class="iconfont">&#xe82b;</i></label>
                <div class="layui-input-inline login-inline">
                  <input type="password" name="password"  placeholder="请输入你的密码"  class="layui-input">
                </div>
            </div>
            <div class="form-actions">
                <input class="btn btn-warning pull-right" lay-submit lay-filter="login"  type="submit" value="登录">
                 <div class="checkbox">
					    <label>
					      <input type="checkbox" name="rememberPassword" value="rememberPassword">记住密码
					    </label>
	  				</div>
            </div>
        </form>
    </div>
	<div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="./images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
     <script>
        	// 如果登录失败会弹出一个提示框
        	var loginErrorMessage = "${param.loginErrorMessage}"; // ${param.参数名} EL表达式获取页面参数值
        	if(loginErrorMessage != ""){
        		alert("用户名或密码错误,请重新登录!");
        	}
     </script>
     <script type="text/javascript">
    		$(document).ready(function(){
    			
    			// 对管理员工号输入框做失去焦点事件，当输入完后，判断cookie中是否存在该工号对应的name，如果有则返回value
    			$("input[name='adminId']").blur(function(){
    				var adminId = $(this).val(); // adminId表示用户输入的登录账号
    				// 获取cookie指定name的value值
    				var password = getCookie(adminId);// 登录账号是cookie中的name
    				// 获取成功
        			if(password != ""){
        				// 填充数据
        				$("input[name='password']").val(password);
        				$("input[name='rememberPassword']").prop("checked",true);
        			}else{
        				$("input[name='password']").val("");
        				$("input[name='rememberPassword']").prop("checked",false);
        			}
    			});
    		})
    		// 自定义函数
    		// 通过cookie中指定的key,获取对应value值
    		function getCookie(cname){
    			
    			var name = cname + "=";  // name="username="   name="password="
    				
    			var ca = document.cookie.split(';');// 根据分号进行字符串的切割,返回一个字符串数组  ca[0]="username=baby"  ca[1]=" password=123456"
    			
    			for(var i = 0; i < ca.length; i++) {// 遍历数组
    				
    				var c = ca[i].trim();   // ca[0]="username=baby"  ca[1]="password=123456" 
    			
    				if (c.indexOf(name)==0) {  // c="username=baby" name="username="  
    					
    					return c.substring(name.length,c.length);  // 字符串裁剪，得到value值
    				}
    			}
    			return "";
    		}
    </script>
</body>
</html>